<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="../css/bootstrap.min.css"rel="stylesheet">
    <link href="../css/docs.css"rel="stylesheet">
    <title>响应式布局</title>
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse " role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">ProjectName</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" >Home</a></li>
                <li ><a href="#" >About</a></li>
                <li ><a href="#" >Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
    <div class="container ">
        <div class="row">
            <div class="col-sm-9">
                <p class="pull-right visible-xs">
                    <button  class="btn-xs btn btn-danger">Toggle</button>
                </p>
                <div  class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                </div>
                <div class="row">
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                    <div class="col-6 col-sm-6 col-lg-4">
                        <h2>headline</h2>
                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                        <a class="btn btn-default">View detail</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <ul class="list-group">
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                    <li class="list-group-item">list-group-item</li>
                </ul>
            </div>
        </div>


    </div>
</body>
</html>